<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link href="./assets/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        li
        {
            float: left;
            margin: 20px;
        }
    </style>
    <script src="./assets/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="./assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
    <ul class="example" style="list-style: none;">
        <li><a class="atip" href="#" data-toggle="tooltip" data-placement="top" title=""
            data-original-title="Tooltip on top">Tooltip on top</a> </li>
        <li><a href="#" class="atip" data-toggle="tooltip" data-placement="right" title=""
            data-original-title="Tooltip on right">Tooltip on right</a> </li>
        <li><a href="#" class="atip" data-toggle="tooltip" data-placement="bottom" title=""
            data-original-title="Tooltip on bottom">Tooltip on bottom</a> </li>
        <li><a href="#" class="atip" data-toggle="tooltip" data-placement="left" title=""
            data-original-title="Tooltip on left">Tooltip on left</a> </li>
        <li><a class="atip" href="#" data-toggle="tooltip" data-original-title="first tooltip">
            hover over me</a> </li>
    </ul>
    <script type="text/javascript">
        $(function () {
            var options = {
                animation: true,
                trigger: 'focus' //触发tooltip的事件
            }
            $('.atip').tooltip(options);

        });
    </script>
</body>
</html>
